<template>
  <div class="box">
    <el-row :gutter="20" type="flex">
      <el-col :span="8" :key="index" v-for="(item, index) in cardList">
        <div class="col1">
          <el-card class="box-card">
            <div
              slot="header"
              class="clearfix"
              style="
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <span v-if="!item.reserve1" @click="changeInput(item)">{{
                item.tagHeaderName
              }}</span>
              <el-input
                @blur="item.reserve1 = !item.reserve1"
                :ref="'inp' + item.tagHeaderId"
                v-else
                @change="editCard(item)"
                v-model="newCardTitle"
              ></el-input>
              <i @click="deleCard(item)" class="el-icon-close"></i>

              <el-button
                slot="reference"
                type="text"
                style="padding: 3px 0; position: absolute; right: 0"
                @click.stop="operateCard(item)"
                >操作</el-button
              >
            </div>
            <el-tree :data="item.treeData" :props="defaultProps"></el-tree>
            <!-- <el-tree :data="item.treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="visibles.open"
      width="50vw"
      style="min-width: 800px"
    >
      <div style="height: 68vh; display: flex; min-height: 800px">
        <div class="diaLeft">
          <el-tree
            :data="testTreeData"
            :props="defaultProps"
            @node-click="selectedNode"
            :highlight-current="true"
            :draggable="true"
            :default-expand-all="true"
            :check-on-click-node="true"
            @node-drop="dropTree"
          ></el-tree>
        </div>
        <div class="diaRight">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-evenly;
            "
          >
            <el-button @click="addLabel">新增</el-button>
            <el-button @click="editLabel" :disabled="objectIsNull"
              >修改</el-button
            >
            <el-button @click="deleteLabel" :disabled="objectIsNull"
              >删除</el-button
            >
          </div>

          <el-form
            v-if="isInput"
            ref="form"
            :model="testLabelForm"
            :rules="testLabelFormRules"
            label-width="80px"
            style="margin-top: 20px"
          >
            <el-form-item
              label="所属分类"
              v-if="
                testLabelForm.reserve1 != 0 &&
                testLabelForm.questionTypesId == null &&
                testLabelForm.questionTypesId == undefined &&
                parentName != undefined
              "
            >
              <el-input
                class="diaInput"
                :disabled="true"
                v-model="parentName"
              ></el-input>
            </el-form-item>
            <el-form-item label="标签名称" prop="questionTypesName">
              <el-input
                class="diaInput"
                v-model="testLabelForm.questionTypesName"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="addLabelForm">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <!-- --------------- -->
    <div style="display: flex; align-items: center">
      <el-button @click="() => (visibles.openCard = true)">添加卡片</el-button>
      <div style="flex: 1">
        <pagination
          v-show="total > 0"
          :total="total"
          layout="total, prev, pager, next, jumper"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getCardList"
        />
      </div>
    </div>
    <!-- --------------- -->
    <el-dialog title="新增卡片" :visible.sync="visibles.openCard" width="350px" class="addCard">
      <div style="height: 120px">
        <el-form
          ref="formCard"
          :rules="formCardRule"
          :model="formCard"
          label-width="80px"
        >
          <el-form-item required prop="tagHeaderName" label="卡片标题">
            <el-input v-model="formCard.tagHeaderName"></el-input>
          </el-form-item>
        </el-form>
        <el-button style="float: right; margin: 20px 0 20px" @click="addCard"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  listTypes,
  getTypes,
  delTypes,
  addTypes,
  updateTypes,
} from "@/api/questionBank/type.js";
//卡片
import {
  listHeader,
  addHeader,
  delHeader,
  updateHeader,
} from "@/api/questionBank/type.js";
export default {
  data() {
    return {
      cardList: [],
      visibles: {
        open: false,
        openCard: false,
      },
      form: {
        questionTypesName: "",
      },
      col1FormRule: {
        questionTypesName: [
          { required: true, message: "标签名称", trigger: "submit" },
        ],
      },
      formCard: {
        tagHeaderName: "",
      },
      formCardRule: {
        tagHeaderName: [
          { required: true, message: "卡片名称", trigger: "submit" },
        ],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 6,
      },
      total: 0,
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      newCardTitle: "",
      testTreeData: [],
      testLabelForm: {
        reserve3: "",
        reserve2: 1,
        reserve1: 0,
        questionTypesName: "",
      },
      testLabelFormRules: {
        questionTypesName: [
          { required: true, message: "请输入名称", trigger: "submit" },
        ],
      },
      temporaryNode: {},
      isInput: false,
      cardId: "",
      parentName: "",
    };
  },
  mounted() {
    this.getCardList();
  },

  watch: {},
  computed: {
    objectIsNull: function () {
      let keys = Object.keys(this.temporaryNode);
      return keys.length == 0 ? true : false;
    },
  },

  methods: {
    getCardList() {
      listHeader(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.cardList = JSON.parse(JSON.stringify(res.rows));
          this.total = res.total;
          this.cardList.forEach((ele) => {
            ele.reserve1 = false;
            listTypes({ reserve3: ele.tagHeaderId }).then((Response) => {
              if (Response.code == 200) {
                this.$set(ele, "treeData", Response.rows);
              }
            });
          });
        }
      });
    },
    //添加卡片
    addCard() {
      this.$refs.formCard.validate((valid) => {
        if (valid) {
          console.log("通过");
          addHeader(this.formCard).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.getCardList();
              this.visibles.openCard = false;
            }
          });
        }
      });
    },
    //删除卡片
    deleCard(val) {
      this.$alert(
        "确定要删除" + val.tagHeaderName + "吗?该操作会删除卡片下的所有标签。",
        "请确认",
        {
          confirmButtonText: "确定",
          callback: (action) => {
            if (action == "confirm") {
              delHeader(val.tagHeaderId).then((res) => {
                if (res.code == 200) {
                  this.$message.success("删除成功");
                  this.getCardList();
                }
              });
            }
          },
        }
      );
    },
    //修改卡片标题
    changeInput(item) {
      item.reserve1 = !item.reserve1;
      this.newCardTitle = item.tagHeaderName;
      setTimeout(() => {
        this.$refs[`inp${item.tagHeaderId}`][0].focus();
      }, 300);
    },
    editCard(item) {
      this.$alert("确定要修改" + item.tagHeaderName + "吗?", "请确认", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            let obj = {
              tagHeaderId: item.tagHeaderId,
              tagHeaderName: this.newCardTitle,
            };
            updateHeader(obj).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.getCardList();
              }
            });
          }
        },
      });

      console.log(item);
    },
    //操作卡片按钮
    operateCard(item) {
      this.cardId = item.tagHeaderId;

      this.getCarTreeData();
    },
    //获取卡片treedata
    getCarTreeData() {
      listTypes({ reserve3: this.cardId }).then((Response) => {
        if (Response.code == 200) {
          this.testTreeData = Response.rows;
          this.testLabelForm.reserve3 = this.cardId;
          this.visibles.open = true;
        }
      });
    },
    //选中增删改树状节点
    selectedNode(data, node, VNode) {
      this.temporaryNode = data;
      this.temporaryNode["name"] = data.name;
      this.testLabelForm.reserve2 = Number(data.type) + 1;
      this.testLabelForm.reserve1 = data.id;
      this.parentName = node.data.name;
      console.log(data, node, this.parentName);
    },
    //新增标签
    addLabel() {
      if (!this.objectIsNull) {
        this.testLabelForm.reserve2 = Number(this.temporaryNode.type) + 1;
        this.testLabelForm.reserve1 = this.temporaryNode.id;
      }
      this.isInput = true;
    },
    addLabelForm() {
      console.log(this.testLabelForm, this.$refs.typeForm);

      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.testLabelForm.questionTypesId) {
            updateTypes(this.testLabelForm).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.getCarTreeData();
                this.resetCardForm();
            this.getCardList()
              }
            });
          } else {
            addTypes(this.testLabelForm).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.getCarTreeData();
                this.resetCardForm();
            this.getCardList()
              }
            });
          }
        }
      });
    },
    //修改标签
    editLabel() {
      this.isInput = true;
      let obj = {
        questionTypesId: this.temporaryNode.id,
        questionTypesName: this.temporaryNode.name,
      };
      this.testLabelForm = obj;
    },
    //删除标签
    deleteLabel() {
      this.$confirm('确认要删除这条数据吗？', '提示',  {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }) .then(() => {
        delTypes(this.temporaryNode.id).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.resetCardForm();
            this.getCarTreeData();
              this.getCardList()
          }
        });
      })
        .catch(action => {

        });


    },
    //重置标签
    resetCardForm() {
      this.testLabelForm = {
        reserve3: "",
        reserve2: 1,
        reserve1: 0,
        questionTypesName: "",
      };
      this.temporaryNode = {};
    },
    //拖拽结束
    dropTree(node, newNode, pos, event) {
      console.log(node, newNode, pos, event, "拖拽结束");
      if (pos == "inner") {
        let obj = {
          questionTypesId: node.data.id,
          reserve1: newNode.data.id,
          reserve2: Number(newNode.data.type) + 1,
        };
        updateTypes(obj).then((res) => {
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.getCarTreeData();
            this.resetCardForm();
            this.getCardList()
          }
        });
        // console.log(obj,'下级');
      } else {
        let obj = {
          questionTypesId: node.data.id,
          reserve1: newNode.data.parentId,
          reserve2: Number(newNode.data.type),
        };
        // console.log(obj,'同级');
        updateTypes(obj).then((res) => {
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.getCarTreeData();
            this.resetCardForm();
            this.getCardList()
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  overflow: auto;
  .el-row {
    flex-wrap: wrap;
  }
  .col1 {
    .el-card {
      height: 45vh;
      min-height: 500px;
    }
    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background-color: #fff;
    }
    .el-input {
      width: auto;
      ::v-deep .el-input__inner {
        border: none;
      }
    }
  }
  .el-col {
    min-width: 503px;
    margin-bottom: 20px;
  }
}
.pagination-container {
  background-color: rgba($color: #000000, $alpha: 0);
  margin-top: -18px;
}

.el-icon-close {
  background-color: red;
  height: 16px;
  line-height: 16px;
  color: white;
  width: 16px;
  position: absolute;
  right: -20px;
  top: -20px;
  border-radius: 50%;
  display: none;
}
.el-card {
  overflow: visible;
  ::v-deep .el-card__body {
    overflow: auto;
    height: calc(100% - 42px);
  }
}

.el-card:hover {
  .el-icon-close {
    display: block;
    cursor: pointer;
  }
}

::v-deep .el-dialog {
  min-width: 800px;
  min-height: 800px;
  .diaLeft {
    height: 100%;
    overflow: auto;
    flex: 1;
    min-width: 250px;
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
  .diaRight {
    flex: 1;
  }
}
.diaInput {
  ::v-deep .el-input__inner {
    border: 1px solid #dcdfe6 !important;
  }
}

.addCard{
  ::v-deep .el-dialog{
    min-height: 230px;
    min-width: 350px;
  }
}
</style>
